<template>
  <a-popover v-model:popup-visible="visible" title="选择图标" trigger="click">
    <a-input v-model="model" allow-clear>
      <template v-if="model" #prefix>
        <component :is="model" />
      </template>
    </a-input>
    <template #content>
      <div class="w-full max-w-lg h-52 overflow-auto flex gap-1 flex-wrap">
        <template v-for="(value, index) in Icons">
          <div
            v-if="index !== 'install'"
            :key="value.name"
            class="p-2 flex justify-center items-center cursor-pointer rounded-md hover:bg-[var(--color-fill-3)]"
            :class="{
              'bg-[var(--color-fill-3)]': index == model,
            }"
            @click="selectIcon(index)"
          >
            <component :is="index" size="22"></component>
          </div>
        </template>
      </div>
    </template>
  </a-popover>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'SelectIcon',
});

import Icons from '@arco-design/web-vue/es/icon/arco-vue-icon';
import { ref } from 'vue';

const model = defineModel({ type: String });
const visible = ref<boolean>(false);

const selectIcon = (icon: string) => {
  visible.value = false;
  model.value = icon;
};
</script>
